{% load i18n common %}
<div class="safe-setting-form">
  <form action="" class="layui-form security-setup-form" lay-filter="safeSettingForm">
    {% csrf_token %}
    {% with form as f %}
      <div class="layui-card-header"><i class="fa fa-shield"></i><span
              style="padding-left: 5px">{% trans 'securityPolicy.tabs.loginSetup' %}</span></div>
      <div class="layui-card-body" style="margin: 10px">
        <div class="layui-form-item">
          {% layui_enable f.single_login %}
          {% layui_enable f.security_code %}
        </div>
        <div class="layui-form-item security-code">
          {% layui_inline f.code_length %}
          {% layui_inline f.valid_duration %}
        </div>
        <div class="layui-form-item">
          {% layui_enable f.failed_locked %}
        </div>
        <div class="layui-form-item failed-locked">
          {% layui_inline f.lock_failed_count %}
          {% layui_inline f.lock_duration %}
        </div>
      </div>
      <div class="layui-card-header"><i class="fa fa-key"></i><span
              style="padding-left: 5px">{% trans 'securityPolicy.tabs.passwordPolicy' %}</span></div>
      <div class="layui-card-body" style="margin: 10px">
        <div class="layui-form-item">
          {% layui_inline f.enforce_pwd_change True %}
        </div>
        <div class="layui-form-item">
          {% layui_inline f.enforce_pwd_expiration True %}
          {% layui_inline f.validity_period %}
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" lay-submit=""
                  lay-filter="safeSubmit">{% trans 'emailSettingPage_btn_submit' %}</button>
        </div>
      </div>
    {% endwith %}
  </form>
</div>
<script>
  {% if not form.security_code.initial %}
    $("div.security-code").addClass('layui-hide');
  {% endif %}
  {% if not form.failed_locked.initial %}
    $("div.failed-locked").addClass('layui-hide');
  {% endif %}
  {% if not form.enforce_pwd_expiration.initial %}
    $("div.field-validity_period").addClass('layui-hide');
  {% endif %}
  layui.use(['form'], function () {
    var form = layui.form, layer = layui.layer;
    form.render();
    form.on('switch(security_code)', function (data) {
      if (data.elem.checked) {
        $("div.security-code").removeClass('layui-hide');
      } else {
        $("div.security-code").addClass('layui-hide');
      }
    });
    form.on('switch(failed_locked)', function (data) {
      if (data.elem.checked) {
        $("div.failed-locked").removeClass('layui-hide');
      } else {
        $("div.failed-locked").addClass('layui-hide');
      }
    });
    form.on('checkbox(enforce_pwd_expiration)', function (data) {
      if (data.elem.checked) {
        $("div.field-validity_period").removeClass('layui-hide');
      } else {
        $("div.field-validity_period").addClass('layui-hide');
      }
    });
    var url = "", method = "get";
    {% if instance %}
      url = "/base/api/v1.0/security_policies/{{ instance.pk }}/";
      method = "put";
    {% else %}
      url = "/base/api/v1.0/security_policies/";
      method = "post";
    {% endif %}
    form.on('submit(safeSubmit)', function (data) {
      var loadIndex = layer.load();
      $.ajax({
        url: url
        ,type: method
        ,headers: {"X-CSRFToken": '{{ csrf_token }}'}
        ,data: data.field
        ,dataType: "json"
        ,success: function (response, status, xhr) {
          layer.close(loadIndex);
          if(xhr.status === 200){
            layer.msg(gettext('action_notification_successful'), {icon: 6});
          }else{
            layer.msg(gettext('action_notification_failed'), {icon: 5});
          }
        }
        ,error: function (response, status, xhr) {
          layer.close(loadIndex);
          layer.msg(gettext('action_notification_failed'), {icon: 5});
        }
      });
      return false;
    });
  });
</script>